<template>
    <div id="reportScore">
    	<Table border :columns="recordCol" :data="recordList"></Table>
	    <Page :total="recordTotal" show-elevator :page-size="queryReportInfo.pageSize" :page="queryReportInfo.pageIndex" show-total  style="text-align:center;margin-top:10px;" @on-change="changePage"/>
    </div>
</template>
<script>
	import {queryClassReport,scoreClassReport} from '@/api/selfStudy/class.js'
    export default {
    	name:'answerRecord',
    	props:['classNumberId','disbledAllBtn'],
        data () {
            return {
				recordList:[],
				recordTotal:0,
				queryReportInfo:{
					pageIndex:1,
					pageSize:10
				},
				recordCol:[//学员名称 课件名称 题目数量 答题数量 正确数量 详情进入查看这个学员的答题详情
					{ 
						title: '序号',
                        align: 'center',
						width:60,
						render:(h,params) => {
                        	let index = (this.queryReportInfo.pageIndex-1)*this.queryReportInfo.pageSize + params.row._index + 1
                        	return h('span',index)
                        }
					},
					{ 
						title:'学员昵称',
						key:'creatorName'
					},
//					{ 
//						title:'课件名称',
//						key:'ecName'
//					},
					{ 
						title:'报告名称',
						key:'reportFileName',
						render:(h,params) => {
							return h('a',{
		                		attrs:{
		              				href:"/api/minio/download/" + params.row.reportFileRecordId,
		                			download:'',
		                			title:'点击下载'
		                		},
		                		style:{
//		                			color:'#fff'
		                		}
		                	},params.row.reportFileName)
						}
					},
					{
			            title: '评级',
			            key:'grade',
			            render: (h, params) => {
			                return h('RadioGroup',{
			                	props:{
			                		value: params.row.grade
			                	},
			                	on:{
								    'on-change':(val)=>{
								    	let data = {
								    		id:params.row.id,
								    		grade:val
								    	};
								    	this.scoreClassReport(data);
								    }
								  }
			                },[
//								h('Radio',{
//								  props:{
//								    label:0,
//								    disabled:this.disbledAllBtn
//								  },
//								  style:{
//								    marginRight:'5px'
//								  },
//								},'未学'),
								h('Radio',{
								  props:{
								    label:1,
								    disabled:this.disbledAllBtn
								  },
								  style:{
								    marginRight:'5px'
								  },
								},'差'),
								h('Radio',{
								  props:{
								    label:2,
								    disabled:this.disbledAllBtn
								  },
								  style:{
								    marginRight:'5px'
								  },
								},'良'),
								h('Radio',{
								  props:{
								    label:3,
								    disabled:this.disbledAllBtn
								  },
								  style:{
								    marginRight:'5px'
								  },
								},'优')
		            	    ])
			            },
			        },
					{
						title:'操作',
						render:(h,params)=>{
							return h('div',[
									h('Button',{
										props:{
											size:'small',
											type:'primary',
											disabled:!params.row.reportFileRecordId
										},
										on:{
											click:()=>{
                                                //新的预览接口
										    	window.openTrain(`/api/minio/filePreview?id=${params.row.reportFileRecordId}`);
											}
										}
									},'预览')
							])
						}
					}
				]
            }
        },
        watch:{
			classNumberId:function(val) {
				this.queryReportInfo.classNumberId = val;
				this.getReportRecord();
			}
        },
        filters:{

        },
        created(){
			this.queryReportInfo.classNumberId = this.classNumberId;
        },
        mounted(){
			this.getReportRecord();
        },
        methods:{
			getReportRecord(){
				queryClassReport(this.queryReportInfo).then(data => {
					if(data.code == 1){
						this.recordList = data.data.items;
						this.recordTotal = data.data.total;
					}else{
						this.$Message.warning(data.message);
					}
				}).catch(error => {
					this.$Message.error(error.message);
				})
			},
			changePage(page){
				this.queryReportInfo.pageIndex = page;
				this.getReportRecord();
			},
			scoreClassReport(report){
				scoreClassReport(report).then(data => {
					if(data.code == 1){
						this.$Message.info('评级成功');
					}else{
						this.$Message.warning('评级失败');
					}
					this.getReportRecord();
				}).catch(error => {
					this.getReportRecord();
					this.$Message.error(error.response.data.message);
				})
			}
        }
    }
</script>
<style scoped>

</style>
